<template>
  <div class="track center" :style="style">
    <Clip v-for="clip in spine.clips" :clip="clip" :key="clip.id"></Clip>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
import Clip from './Clip.vue'
import { Spine } from '@/types'

const { spine } = defineProps<{ spine: Spine }>()
const style = reactive({
  height: '50px',
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
@import '../../assets/varibles.styl'
.track
  position relative
  background $trackBgColor
</style>
